<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/hanzimu.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>

<body>
    <header>
        <nav class="han-head">
            <div class="han-top">
              <div id="han-logo"><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E9%A1%B9%E7%9B%AE%E6%95%B4%E4%BD%93/index.html"></a></div>
              <!-- 顶部导航栏 -->
              <ul class="han-list">
                  <li><a href="#" class="han-item active">发现音乐</a></li>
                  <li><a href="#">我的音乐</a></li>
                  <li><a href="#">关注</a></li>
                  <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fifth.html">商城</a></li>
                  <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/sixth.html">音乐人</a></li>
                  <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fourth.html">个人设置</a></li>
                  <li class="han-hot"></li>
              </ul>
              <!-- 右侧搜索框以及用户登录区域 -->
              <ul class="han-right-list">
                <li class="han-search-wrap"><input type="search" placeholder="音乐/视频/电台/用户"></li>
                <li><a href="#">创作者中心</a></li>
                <li><a href="#">登录</a></li>
              </ul>
            </div>
        </nav>

        <nav class="han-middle-nav">
            <div class="han-inner">
                <ul>
                <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/second.html">推荐歌单</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="">云推歌</a></li>
                <li><a href="#">主播电台</a></li>
                <li><a href="#">歌手</a></li>
                <li><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </nav>
    </header>
        
    <main>
    <!-- 轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            <a href="#"><img src="./img/1.jpg" alt="Image 1"></a>
            </div>
            <div class="swiper-slide">
            <a href="#"><img src="./img/2.jpg" alt="Image 2"></a>
            </div>
            <div class="swiper-slide">
            <a href="#"><img src="./img/3.jpg" alt="Image 3"></a>
            </div>
            <div class="swiper-slide">
            <a href="#"><img src="./img/4.jpg" alt="Image 4"></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="./img/5.jpg" alt="Image 5"></a>
        </div>
        <div class="swiper-slide">
            <a href="#"><img src="./img/6.jpg" alt="Image 6"></a>
        </div>
    </div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    </div>

    <div class="han-middle-div">
        <dl class="han-acd">
            <dt class="han-cur">飙升榜</dt>
            <dd>
                <li><a href="#">1. 孤独患者</a></li>
                <li><a href="#">2. 曼陀罗华</a></li>
                <li><a href="#">3. Cry For Me</a></li>
                <li><a href="#">4. 红昭愿</a></li>
                <li><a href="#">5. 没有寄的信</a></li>
                <li><a href="#">6. Something New</a></li>
            </dd>
        
            <dt>新歌榜</dt>
            <dd>
                <li><a href="#">1. 曼陀罗华</a></li>
                <li><a href="#">2.谦让 </a></li>
                <li><a href="#">3. Suyattim</a></li>
                <li><a href="#">4. Nothing's Gonna Stop Us Now</a></li>
                <li><a href="#">5. 十里亭</a></li>
                <li><a href="#">6. 炊烟</a></li>
            </dd>
                
            <dt>古典乐榜</dt>
            <dd>
                <li><a href="#">1. 卡农</a></li>
                <li><a href="#">2.《致爱丽丝》 </a></li>
                <li><a href="#">3. 《月光奏鸣曲》第一乐章</a></li>
                <li><a href="#">4. 舒伯特小夜曲</a></li>
                <li><a href="#">5. 莫扎特: 摇篮曲</a></li>
                <li><a href="#">6. 小步舞曲（巴赫）</a></li>
            </dd>
            
            <dt>民谣榜</dt>
            <dd>
                <li><a href="#">1. 秋风</a></li>
                <li><a href="#">2.窗外小雨 </a></li>
                <li><a href="#">3. 青春的颜色</a></li>
                <li><a href="#">4. 昆明</a></li>
                <li><a href="#">5. 莫扎特: 摇篮曲</a></li>
                <li><a href="#">6. 小步舞曲（巴赫）</a></li>
            </dd>
            
            <dt>原创榜</dt>
            <dd>
                <li><a href="#">1. 孩子啊</a></li>
                <li><a href="#">2. 星外无声 </a></li>
                <li><a href="#">3. Show You How</a></li>
                <li><a href="#">4. 月光下的思念</a></li>
                <li><a href="#">5. A Million Years</a></li>
                <li><a href="#">6. Once Upon a Time</a></li>
            </dd>
        </dl>

        <dl class="han-gridbox">


        </dl>
        
        <dl class="han-tab">
            <div class="han-t-title">
                <span class="han-tittlecur"><a href="#">电视剧原声带</a></span>
                <span><a href="#">十年音乐精选</a></span>
                <a href="#">更多>></a>
            </div>
            <div class="han-tc han-show">
                <p>本专辑是电视剧《择天记》电视剧原声带，自《择天记》开播以来，剧中的BGM好评如潮，
                    恰如其分的旋律和情感抒发使得角色更加饱满，剧情更加富有节奏。
                    全部原声歌曲+配乐由上海谭旋音乐工作室倾力打造，首批2CD精装盘限量500张。</p>
                <img src="./img/cd1.jpg">
            </div>
            <div class="han-tc">
                <p>谭旋音乐工作室是一个集［视·听·幻］于一体的音乐品牌。
                    凭其灵活思维和专业制作，以音乐的方式，将影视的情感表达出来。
                    ［留藏美好］一起见证谭旋首个十年的最精彩，［重播］继续收藏那些耳语流连的岁月经典。</p>
                <img src="./img/cd2.jpg">
            </div>
        </dl>
    </div>
    </main>

        <footer>
            <p>&copy; 2024 网易云音乐示例版权所有</p>
        </footer>


    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            // 配置选项
            direction: 'horizontal', // 滑动方向，可以是'horizontal'或'vertical'
            loop: true, // 是否循环播放
            //分页器
            pagination: {
            el: '.swiper-pagination',
            },
            // 导航按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            autoplay: { // 自动播放配置
                delay: 1500, // 自动切换的时间间隔，单位为毫秒
                disableOnInteraction: false // 用户操作后是否停止自动播放
                }
            }
        );

        /*acd*/
        var acd = document.querySelector('.han-acd'); 
        var dts = acd.getElementsByTagName('dt'); 
        var dds = acd.getElementsByTagName('dd');
        for(var i=0;i<dts.length;i++){
            /*鼠标悬浮时事件*/
            dts[i].onmouseover=function(){
                for(var j=0;j<dds.length;j++){
                    dds[j].style.display='none'; 
                    dts[j].className=''; 
                }
                this.className='han-cur';
                this.nextElementSibling.style.display='block';
            }
        }

        /*gridbox*/
        var gridbox = document.querySelector(".han-gridbox");
        var json=[{"pic":"./img/4.jpg"},{"pic":"./img/5.jpg"},{"pic":"./img/1.jpg"},{"pic":"./img/3.jpg"},{"pic":"./img/6.jpg"},{"pic":"./img/2.jpg"}];
        function addRow(row){
            var element=document.createElement("div");
            var es6_hang=`<a href="#"><img src="${row.pic}"><div class="han-mask"></div></a>`;
            element.innerHTML=es6_hang; 
            gridbox.appendChild(element);  
        }
        for(var i=0;i<json.length;i++){
              addRow(json[i]);  //添加json里的数据
            }

        var links = gridbox.querySelectorAll("a");
        for(var i=0;i<links.length;i++){
            /*鼠标悬浮时事件*/
            links[i].onmouseover=function(){
               for(var j=0;j<links.length;j++){
                    links[j].children[1].style.display='block';
               }
               this.children[1].style.display='none'; //当前a标签的第二个子元素
            }
            /*鼠标离开时事件*/
            links[i].onmouseout=function(){
                for(var j=0;j<links.length;j++){
                    links[j].children[1].style.display='none';
               }
            }
        }

         /*tab*/
        var tab = document.querySelector('.han-tab');
        var tt = tab.querySelector('.han-t-title');
        var spans = tt.querySelectorAll('span'); //获取所有的span标签
        var tcs = tab.querySelectorAll('.han-tc');  //获取所有的tc标签
        for(var i=0;i<spans.length;i++){
            spans[i].index=i;
            /*鼠标悬浮时事件*/
            spans[i].onmouseover=function(){
                for(var j=0;j<tcs.length;j++){
                    tcs[j].style.display="none";
                    spans[j].className="";
                }
                tcs[this.index].style.display="block";
                this.className="han-tittlecur";
            }
        }
    </script> 
</body>
</html>